<template>
  <div class="container">
    <template v-for="(col, index) in columns">
      <template v-if="!col.isHidden || !col.isHidden(detail)">
        <template v-if="col.col && col.children && col.col > 1 && col.children.length > 0">
          <el-row :key="col.key" :gutter="20" :class="{ 'pt_16': index !== 0 }">
            <template v-for="item in col.children">
              <el-col :key="item.key" :span="24/col.col">
                <div class="item">
                  <div class="label" :style="{ width: labelWidth + 'px' }">{{ item.title }}：</div>
                  <div class="value">
                    <slot v-if="col.hasSlot" :name="item.key" :row="detail" />
                    <template v-else-if="col.render">{{ col.render(detail[item.key], detail) }}</template>
                    <template v-else>{{ detail[item.key] }}</template>
                  </div>
                </div>
              </el-col>
            </template>
          </el-row>
        </template>
        <div v-else :key="col.key" :class="{ item: true, 'pt_16': index !== 0 }">
          <div class="label" :style="{ width: labelWidth + 'px' }">{{ col.title }}：</div>
          <div class="value">
            <slot v-if="col.hasSlot" :name="col.key" :row="detail" />
            <template v-else-if="col.render">{{ col.render(detail[col.key], detail) }}</template>
            <template v-else>{{ detail[col.key] }}</template>
          </div>
        </div>
      </template>

    </template>
  </div>
</template>

<script>
export default {
  name: 'DetailTable',
  props: {
    detail: {
      type: Object,
      default: null
    },
    columns: {
      type: Array,
      default: null
    },
    labelWidth: {
      type: Number,
      default: 80
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    .item {
      width: 100%;
      display: table;
      .label {
        width: 80px;
        text-align: right;
        display: table-cell;
        vertical-align: top;
        line-height: 1.15
      }
      .value {
        display: table-cell;
        padding-left: 5px;
        line-height: 20px;
        vertical-align: top;
        line-height: 1.15
      }
    }
  }
  .pt_16 {
    padding-top: 8px;
  }
</style>
